<template>
  <div class="bg">
  <div class="personal-info-container">
    <!-- <div id="main" style="margin-left: 5px"></div> -->
    <h2 class="personal-info-title">修改密码</h2> 
    <!-- <el-card style="width: 50%; margin-left: 120px; margin-top: 40px"> -->
      <el-form ref="form" :model="form" status-icon :rules="rules" label-width="80px" class="form-item">
        <el-form-item label="老密码" prop="password2" class="form-item-content">
          <el-input v-model="form.password2" type="password" autocomplete="off" style="width: 80%;"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password" class="form-item-content">
          <el-input v-model="form.password" type="password" autocomplete="off" style="width: 80%;"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="checkpassword" class="form-item-content">
          <el-input v-model="form.checkpassword" type="password" autocomplete="off" style="width: 80%;"></el-input>
        </el-form-item>
      </el-form>
        <div class="button-container">
          <el-button type="primary" @click="submitForm" style="text-align: center">提交</el-button>
          <el-button @click="resetForm('form')" style="text-align: center">重置</el-button>
        </div>
  </div>
</div>
</template>

<script>
import * as echarts from "echarts";
import request from "../utils/request";
import { ElMessage } from "element-plus";

export default {
  name: "Password",
  data() {
    const validatePass2 = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入老密码"));
      } else {
        // if (this.form.password2 !== this.form.truepassword) {
        //   callback(new Error("密码错误"));
        // }
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        callback();
      }
    };
    const validatePass3 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不匹配"));
      } else {
        callback();
      }
    };
    return {
      form: {
        password2: "",
        checkpassword: "",
        truepassword: "",
        id: 0,
      },
      rules: {
        password: [
          { validator: validatePass, trigger: "blur", required: true },
        ],
        checkpassword: [
          { validator: validatePass3, trigger: "blur", required: true },
        ],
        password2: [
          { validator: validatePass2, trigger: "blur", required: true },
        ],
      },
    };
  },
  created() {
    let user = JSON.parse(sessionStorage.getItem("user"));
    console.log(user, "user");
    if (user) {
      this.form.truepassword = user.password;
      this.form.id = user.id;
    }
  },
  mounted() {},
  methods: {
    // submitForm() {

    //   this.$refs['form'].validate((valid) => {
    //     if (valid) {
    //       request.put("/user", this.form2).then(res => {
    //         if (res.status == 200) {
    //           ElMessage.success("密码修改成功,请重新登录")
    //           sessionStorage.removeItem("user")//清空缓存的用户信息
    //           this.$router.push("/login")//跳转登录界面
    //         } else {
    //           ElMessage.error(res.msg)
    //         }
    //       })
    //     }
    //   })
    // },
    async submitForm() {
      try {
        this.$refs["form"].validate(async (valid) => {
          if (valid) {
            const res = await request.put("/user", this.form);
            if (res.status === 200) {
              ElMessage.success("密码修改成功,请重新登录");
              sessionStorage.removeItem("user"); // 清空缓存的用户信息
              this.$router.push("/login"); // 跳转登录界面
            } else {
              ElMessage.error(res.message);
            }
          }
        });
      } catch (error) {
        ElMessage.error(error.message || "请求失败");
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>


<style scoped>
.bg{
    display: flex;
    background: url('../img/111.jpg') no-repeat ;
    background-size: cover;
}
.personal-info-container {  
  display: flex;  
  flex-direction: column;  
  width: 100%;  
  height: auto;  
  max-width: 600px;  
  margin: auto;  
  padding: 20px;  
  background: linear-gradient(135deg, #f9f9f9 0%, #ececec 100%);  
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);  
  border-radius: 12px;  
}  

.personal-info-title {  
  text-align: center;  
  padding-bottom: 20px;  
  font-size: 28px;  
  color: #333;  
}  

.form-item {  
  margin-bottom: 22px;  
}  

.form-item-content {  
  white-space: nowrap;  
  display: flex;  
  align-items: center;  
}  

.button-container {  
  text-align: center;  
  margin-top: 20px;  
}  
</style>
